<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>jsplumb-viso</title>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet">
  <link rel="stylesheet" href="./public/css/index.css">
</head>

<body>
  <div id="app">
    <div class="container-fluid">
      <div class="row">
        <div id="side-buttons" class="col-md-1 bg-info min-height">
          <div>
            <h5>节点类型列表</h5>
            <a class="btn btn-success btn-controler" href="#" data-template="tpl-audio" role="button">
              <i class="fa fa-play-circle-o" aria-hidden="true"></i>
              语音播报</a>
            <a class="btn btn-success btn-controler" href="#" data-template="tpl-menu" role="button">
              <i class="fa fa-navicon" aria-hidden="true"></i>
              菜单</a>
           
          </div>
        </div>
        <div class="col-md-11 bg-success min-height" id="drop-bg">

        </div>
      </div>
    </div>
  </div>

  <script id="tpl-audio" type="text/html">
    <div class='pa' id='{{id}}' style='top:{{top}}px;left:{{left}}px'>
      <a class='btn btn-default' href='#' role='button'> 放音
        <span class="delete-node pull-right" data-type="deleteNode" data-id="{{id}}">X</span>
      </a>
    </div>
  </script>

  <script id="tpl-demo" type="text/html">
    <div class='pa' id='{{id}}' style='top:{{top}}px;left:{{left}}px'>
      <a class='btn btn-default' href='#' role='button'> {{name}}
        <span class="delete-node pull-right" data-type="deleteNode" data-id="{{id}}">X</span>
      </a>
    </div>
  </script>

  <script id="tpl-Announce" type="text/html">
    <div class='pa' id='{{id}}' style='top:{{top}}px;left:{{left}}px'>

      <a class='btn btn-default' href='#' role='button'>
        <i class="fa fa-play-circle-o" aria-hidden="true"></i>
        {{name}}
        <span class="delete-node pull-right" data-type="deleteNode" data-id="{{id}}">X</span>
      </a>
    </div>
  </script>

  <script id="tpl-menu" type="text/html">
    <div class="pa" id='{{id}}' style='top:{{top}}px;left:{{left}}px'>
      <div class="panel panel-default panel-node panel-info">
        <div id='{{id}}-heading' data-id="{{id}}" class="panel-heading">菜单
          <span class="delete-node pull-right" data-type="deleteNode" data-id="{{id}}">X</span>
        </div>
        <ul class="list-group">
          <li id="{{generateId}}" data-pid="{{id}}" class="list-group-item panel-node-list">按1
          </li>
          <li id="{{generateId}}" data-pid="{{id}}" class="list-group-item panel-node-list">按2
          </li>
          <li id="{{generateId}}" data-pid="{{id}}" class="list-group-item panel-node-list">按3
          </li>
        </ul>
      </div>
    </div>
  </script>

  <script id="tpl-Root" type="text/html">
    <div class='pa' id='{{id}}' style='top:{{top}}px;left:{{left}}px'>
      <a class='btn btn-success' href='#' role='button'> {{name}}
        <span class="delete-node pull-right" data-type="deleteNode" data-id="{{id}}">X</span>
      </a>
    </div>
  </script>

  <script id="tpl-Exit" type="text/html">
    <div class='pa' id='{{id}}' style='top:{{top}}px;left:{{left}}px'>
      <a class='btn btn-danger' href='#' role='button'> {{name}}
        <span class="delete-node pull-right" data-type="deleteNode" data-id="{{id}}">X</span>
      </a>
    </div>
  </script>

  <script id="tpl-WorkTime" type="text/html">
    <div class="pa" id='{{id}}' style='top:{{top}}px;left:{{left}}px'>
      <div class="panel panel-default panel-node panel-info">
        <div id='{{id}}-heading' data-id="{{id}}" class="panel-heading"><i class="fa fa-calendar-times-o" aria-hidden="true"></i> {{name}}
          <span class="delete-node pull-right" data-type="deleteNode" data-id="{{id}}">X</span>
        </div>
        <ul class="list-group">
          <li id="{{id}}-onWorkTime" data-pid="{{id}}" class="list-group-item panel-node-list">工作时间
          </li>
          <li id="{{id}}-offWorkTime" data-pid="{{id}}" class="list-group-item panel-node-list">非工作时间
          </li>
        </ul>
      </div>
    </div>
  </script>

  <script id="tpl-Menu" type="text/html">
    <div class="pa" id='{{id}}' style='top:{{top}}px;left:{{left}}px'>
      <div class="panel panel-default panel-node panel-info">
        <div id='{{id}}-heading' data-id="{{id}}" class="panel-heading"><i class="fa fa-navicon" aria-hidden="true"></i> {{name}}
          <span class="delete-node pull-right" data-type="deleteNode" data-id="{{id}}">X</span>
        </div>
        <ul class="list-group">
          <li id="{{id}}-noinput" data-pid="{{id}}" class="list-group-item panel-node-list">输入超时
          </li>
          <li id="{{id}}-nomatch" data-pid="{{id}}" class="list-group-item panel-node-list">输入错误
          </li>
          {{#choices}}
          <li id="{{id}}-key-{{key}}" data-pid="{{id}}" class="list-group-item panel-node-list">按{{key}}
          </li>{{/choices}}
        </ul>
      </div>
    </div>
  </script>

  <script src="https://cdn.bootcss.com/node-uuid/1.4.8/uuid.min.js"></script>
  <script src="https://cdn.bootcss.com/mustache.js/2.3.0/mustache.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="https://cdn.bootcss.com/jsPlumb/1.7.6/jquery.jsPlumb.min.js"></script>
  <script src="./public/js/graphlib.min.js"></script>
  <script src="./public/js/data.js"></script>
  <script src="./public/js/config.js"></script>
  <script src="./public/js/api.js"></script>
  <script src="./public/js/index.js"></script>

</body>

</html>